<template>
  <a-modal :open="open" width="700px" height="800" title="过敏信息" centered @cancel="onCancel" @ok="onOk">
    <div class="h-[360px] overflow-y-scroll">
      <BaseTable :columns="columns" :data-source="tableData" :loading="loading" :pagination="null">
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'NO'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'dictItemName'">
            {{ record.editLock ? record.dictItemName + '（已查）' : record.dictItemName }}
          </template>
          <template v-if="column.dataIndex === 'status'">
            <!-- 过敏状态;0:未查|1：无|2：有 -->
            <a-radio-group v-model:value="record.status" :disabled="record.editLock">
              <a-radio :value="0">未查</a-radio>
              <a-radio :value="1">阴性</a-radio>
              <a-radio :value="2">阳性</a-radio>
            </a-radio-group>
          </template>
        </template>
      </BaseTable>
    </div>
    <div class="mt-6">
      <a-textarea v-model:value="gmsValue" placeholder="请输入过敏信息" :auto-size="{ minRows: 4, maxRows: 5 }" />
    </div>
  </a-modal>
</template>
<script setup>
import { ref, watch } from 'vue'
import { post } from '@/utils/request'

const tableData = ref([])
const loading = ref(false)
// const inputVal = ref('')
const gmsValue = ref('')
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  value: {
    type: String,
    default: () => ''
  },
  sourceData: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:open', 'update:value', 'success'])

const columns = ref([
  {
    title: '序号',
    dataIndex: 'NO',
    width: 60
  },
  {
    title: '过敏类目',
    dataIndex: 'dictItemName'
  },
  {
    title: '过敏结果',
    width: 240,
    dataIndex: 'status'
  }
])

const getData = async () => {
  loading.value = true
  const { code, data } = await post('/operation/opex/getDictCommonItemList', {
    dictCommonCode: 'DT00032',
    status: 1
  })
  loading.value = false
  if (code === 0) {
    tableData.value = data.map((item) => {
      item.status = 0
      return item
    })
  }
}
const onCancel = () => {
  emit('update:open', false)
}
const onOk = () => {
  // inputVal.value = ''
  // const selectArr = tableData.value.filter((item) => {
  //   return item.status === 2
  // })
  // if (selectArr && selectArr.length > 0) {
  //   selectArr.forEach((item, index) => {
  //     if (selectArr.length === index + 1) {
  //       inputVal.value += item.dictItemName + ' (+)'
  //     } else {
  //       inputVal.value += item.dictItemName + ' (+)' + '、'
  //     }
  //   })
  // } else {
  //   inputVal.value = ''
  // }
  // emit('success', { data: tableData.value, value: inputVal.value })
  emit('success', { data: tableData.value, value: gmsValue.value })
}

watch(
  () => props.value,
  (val) => {
    gmsValue.value = val
  },
  {
    deep: true,
    immediate: true
  }
)
watch(
  () => props.open,
  (val) => {
    if (val) {
      if (props.sourceData && props.sourceData.length > 0) {
        tableData.value = JSON.parse(JSON.stringify(props.sourceData))
      } else {
        getData()
      }
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
